<template>
	<view class="findPsd-content">
		<view style="height: 20px;"></view>
		<view class="icon_return">
				<uni-icons type="back" @tap="returnTo">返回</uni-icons>
		</view>
			<view style="text-align: center;width: 80%;">
				<h1 class="findPsd_h1">修改密码</h1>
				<label class="findPsd_tip">新密码不能与先前密码相同</label>

				<view>
					<view class="findPsd_id_psd">用户名</view>
					<view class="findPsd_input">
						<uni-icons type="person" class="icon_user"></uni-icons>
						<input disabled="true" v-model="this.username"></input>
					</view>
				</view>
				<view>
					<view class="findPsd_id_psd">原密码</view>
					<view class="findPsd_input">
						<uni-icons type="locked" class="icon_user"></uni-icons>
						<input placeholder="请输入原密码" type="password" data="passwordtype" v-model="this.oldPassword" style="width: 100%;"></input>
					</view>
				</view>
				<view>
					<view class="findPsd_id_psd">新密码</view>
					<view class="findPsd_input">
						<uni-icons type="locked" class="icon_user"></uni-icons>
						<input placeholder="请输入新密码" type="password" data="passwordtype" v-model="this.password" style="width: 100%;"></input>
					</view>
				</view>
				<view>
					<view class="findPsd_id_psd">确认密码</view>
					<view class="findPsd_input">
						<uni-icons type="locked" class="icon_user"></uni-icons>
						<input placeholder="请再次输入新密码" type="password" data="passwordtype" v-model="this.repeatPassword" style="width: 100%;"></input>
					</view>
				</view>
				<button class="findPsd_btn" type="primary" @click="findPsd">修改密码</button>
			</view>
	</view>
</template>

<script>
import request from '../../common/request'
	export default {
		data() {
			return {
				userId:"",
				username:"",
				oldPassword:"",
				password:"",
				repeatPassword:"",
			}
		},
		onLoad(){
			let userInfo = uni.getStorageSync('userInfo')
			this.username = userInfo.username
			this.userId = userInfo.userId
		},
		methods: {
			findPsd(){
				console.log("按按钮")
				if(this.username !== "" && this.password !== "" && this.repeatPassword !== "" && this.oldPassword !== ""){
					if(this.password === this.repeatPassword){
						request('/users/account/login', 'POST', {},{
							username: this.username,
							password: this.oldPassword,
						}).then(res=>{
							if(res.data.code === 1){
								uni.showToast({
									title:"原密码错误",
									icon:"none",
								})
							}else if (res.data.code === 0){
								//修改密码
								this.updatePassword()
							}
						})
					}else{
						uni.showToast({
							title:"两次输入新密码不一致",
							icon:'none',
						})
					}
					
				}else{
					uni.showToast({
						title:"填入数据不能为空",
						icon:'none',
					})
				}
			},
			returnTo(){
				uni.navigateBack()
			},
			updatePassword(){
				request('/users/account/fixPassword','PUT',{
					userId:this.userId,
					oldPassword:this.oldPassword,
					newPassword : this.password
				},{
					userId:this.userId,
				}).then(res=>{
					console.log(res)
					if(res.data.code === 0){
						uni.showToast({
							title:"修改密码成功,即将返回登录界面",
							icon:'none',
						})
						setTimeout(()=>{
							//清理数据
							uni.removeStorageSync('userInfo')
							uni.removeStorageSync('roleId')
							uni.navigateTo({
								url:"/pages/users/login"
							})
						},1000)
					}else{
						uni.showToast({
							title:"修改失败，请稍后重试",
							icon:'none'
						})
					}
					
				})
			}
		}
	}
</script>

<style scoped>
	.findPsd-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		background-color: #f5f5f5;
	}

	.icon_return {
		margin-top: 10px;
		padding-left: 10px;
		align-self: flex-start;
		width: 60px;
		height: 40px;
	}

	.findPsd_h1 {
		margin: 10px;
		margin-top: 50px;
	}

	.findPsd_tip {
		text-align: center;
		font-size: 14px;
		color: gray;
		margin-bottom: 100px;
	}

	.findPsd_id_psd {
		margin-top: 20px;
		text-align: left;
		margin-bottom: 5px;
	}

	.icon_user {
		margin-right: 10px;
	}

	.findPsd_input {
		display: flex;
		flex-direction: row;
		border-radius: 10px;
		height: 40px;
		font-size: 16px;
		text-align: left;
		padding-left: 10px;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.04);
		border: 1px solid #EBF2FF;
		align-items: center;
	}

	.findPsd_btn {
		border-radius: 15px;
		margin-top: 50px;
	}
</style>